<template>
    <el-container  :style="{height : curHeight}">
        <el-main>
            <!--<transition name="fade" mode="out-in">-->
                <component :is="activeComponent" ref="module" @changeComponent="changeComponent" :params="params"/>
            <!--</transition>-->
        </el-main>
    </el-container>
</template>
<script>
import mobileapproval from '../mobileapproval/index'
export default {
  name: 'index',
  components: {
    mobileapproval
  },
  data() {
    return {
      zIndex: -1,
      beginDate: null,
      params: undefined,
      activeComponent: 'mobileapproval'
    }
  },
  computed: {
    curHeight() {
      return $(document).height() + 'px';

    }
  },
  watch: {
    activeComponent() {
      if (this.activeComponent === 'home') {
        this.zIndex = -1;
      } else {
        this.zIndex = 0;
      }
    }
  },
  methods: {
    changeBg(zIndex) {
      this.zIndex = zIndex;
    },
    changeComponent(index, params) {
      try {
        console.info(index);
        this.$nextTick(function() {
          this.activeComponent = index || 'search';
          this.params = params;
        })
      } catch (e) {
      }
    }
  },
  created() {
    Vue.prototype.$Crouter = this;
    window.$Crouter = this;
  },
  mounted() {
    var me = this;
    window.addEventListener('popstate', function(event) {
      history.pushState(null, null, document.URL);
    }, false);
  }
}
</script>

<style scoped>

</style>
